<!DOCTYPE html>
<html>
    <head>
        <title>GESPROY v1.0</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet"  href="../css/themes/default/jquery.mobile-1.3.1.min.css">
        <link rel="stylesheet"  href="../css/estilo.css">
        <script src="../js/static/jquery.js"></script>
        <script src="../js/static/jquery.mobile-1.3.1.min.js"></script>
        <script src="../js/manejadorbd.js"></script>        
    </head>
    <body>
        <section data-role="page" id="grupo" data-theme="b">
            <header data-role="header" data-theme="b" data-position="fixed">
                <a href="#" data-role="button" data-rel="back" data-icon="back" data-iconpos="notext">Volver</a>
                <h1>Grupos</h1>
                <a data-rel="dialog" href="#ajustes" class="ui-btn-right" data-icon="delete" data-iconpos="notext">Ajustes</a>
            </header>            
            <article data-role="content">
                <form id="form_crear_grupo">
                    <div data-role="fieldcontain">
                        <label for="txtnombres">Nombre de Grupo:</label> 
                        <input type="text" id="txtnombres" value="" 
                               placeholder="Escribe aqu&iacute; nombre de grupo" required/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="txtporcentaje">Porcentaje</label> 
                        <select name="txtporcentaje" id="txtporcentaje"> 
                            <option value="0">Seleccione...</option>
                            <option value="0">0%</option>
                            <option value="5">5%</option>
                            <option value="10">10%</option>
                            <option value="15">15%</option>
                            <option value="20">20%</option>
                            <option value="25">25%</option>
                            <option value="30">30%</option>
                            <option value="35">35%</option>
                            <option value="40">40%</option>
                            <option value="45">45%</option>
                            <option value="50">50%</option>
                            <option value="55">55%</option>
                            <option value="60">60%</option>
                            <option value="65">65%</option>
                            <option value="70">70%</option>
                            <option value="75">75%</option>
                            <option value="80">80%</option>
                            <option value="85">85%</option>
                            <option value="90">90%</option>
                            <option value="95">95%</option>
                            <option value="100">100%</option>
                        </select>
                    </div>
                    <input type="button" value="Guardar" id="btnGuardarGrupo" />
                </form>
            </article>
        </section>

        <section data-role="dialog" id="ajustes" data-theme="b">
            <header data-role="header" data-theme="b">
                <h1>Cerrar sesión</h1>
            </header>            
            <article data-role="content">
                <center>
                    <p>¿ Seguro que quieres cerrar sesión ?</p>

                    <table>
                        <tr>
                            <td>
                                <a href="#" data-role="button"  data-rel="back" data-theme="a">No</a>
                            </td>
                            <td>
                                <a href="../index.html" rel="external" data-role="button" data-theme="e">Cerrar Sesión</a>
                            </td>
                        </tr>
                    </table>
                </center>
            </article>
        </section>         
    </body>
</html>